<template>
  <div class="life-container">
    <!--  卡片  -->
    <el-row :gutter="20">
      <el-col  v-for="(card, index) in cardList1" :key="index" style="margin-top: 20px;" :xs="24" :sm="12" :md="12" :lg="6">
        <el-card  class="padding-top-bottom-16 padding-left-right-6 flex" style="width: 100%">
          <div class="flex align-center" style="width: 100%">
            <div class="flex-auto ">
              <div class="flex justify-content-space-between">
                <div class="title">{{ card.title }}</div>
              </div>
              <div class="flex align-center  justify-content-space-between">
                <div class="count">￥{{ card.count }}</div>
              </div>
            </div>
             <div class="" style="border: 1px solid blue">
              <img src="" style="display: block;width: 60px;height: 60px;" class="border" alt="">
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 党员缴纳 -->
    <div class="pay-container flex justify-content-space-between">
         <div class="pay">
           <div class="flex justify-content-space-between">
             <div class="title">党员缴纳</div>
             <div class="date">2025年8月</div>
           </div>
           <div class="flex justify-content-space-between" style="margin-top: 30px">
             <div class="title" style="font-weight: normal;font-size: 17px">基本工资</div>
             <div class="date" style="font-weight: bolder;color: #333333">￥8650.00</div>
           </div>
           <div class="flex justify-content-space-between"  style="margin-top: 20px; border-bottom: 1px solid #E8EAED;padding-bottom: 20px">
             <div class="title" style="font-weight: normal;font-size: 17px">党费比例</div>
             <div class="date" style="font-weight: bolder;color: #333333">1%</div>
           </div>
           <div class="flex justify-content-space-between"  style="margin-top: 20px; ">
             <div class="title">应缴党费</div>
             <div class="date" style="font-weight: bolder;color: #ee0505;font-size: 20px">1%</div>
           </div>
           <div class="flex justify-content-center align-center"  style="margin-top: 20px;color: #ffffff;background-color: #EE1C25;padding: 5px;border-radius: 5px;">
             <img src="" style="display: block;width: 35px;height: 35px" alt="">
             <div style="margin-left: 10px;font-size: 16px">立即缴纳</div>
           </div>
           <div class="date" style="text-align: center;margin-top: 20px;font-size: 15px;margin-bottom: 20px">支持微信、支付宝、银联支付</div>
         </div>
        <div class="payment-record flex-auto">
          <PayRecordComponent />
        </div>
    </div>
    <!-- 党费缴纳记录 -->
    <AllPayRecordComponent />
    <!-- 党费计算标准 -->
    <div class=" standard-container flex justify-content-space-between">
       <div class="standard flex-auto" style="background-color: #FFFFFF;margin-right: 10px;">
         <div class="flex justify-content-space-between">
           <div class="title">党费计算标准</div>
           <div class="date flex align-center" style="color: #EE1D26">
             <el-icon style="font-size: 18px"><Edit /></el-icon>
             <div style="padding-left: 5px;cursor: pointer">修改标准</div>
           </div>
         </div>
         <el-table :data="feeRules"  style="width: 100%;margin-top: 20px;padding-bottom: 20px" height="200px">
           <el-table-column prop="level" label="岗位级别"  />
           <el-table-column prop="salaryRange" label="工资范围" align="center" />
           <el-table-column prop="rate" label="党费比例" align="center" />
           <el-table-column prop="example" label="示例" align="center" />
         </el-table>
       </div>
       <!--  支部党费收缴情况  -->
       <div class="situation flex-auto" style="background-color: #FFFFFF;margin-left: 10px">
         <div class="flex justify-content-space-between align-center">
           <div class="title">党费计算标准</div>
           <el-select v-model="record" placeholder="请选择时间" style="width: 150px">
             <el-option label="全部" value="all"></el-option>
             <el-option label="已完成" value="completed"></el-option>
           </el-select>
         </div>
         <EchartsComponent :options="chartOption0" class="charts-common"></EchartsComponent>
       </div>
    </div>
    <!-- 党费使用申请-->
    <UseApply />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Search,Plus } from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import PayRecordComponent from "./component/PayRecordComponent.vue"
import AllPayRecordComponent from "./component/AllPayRecordComponent.vue"
import UseApply from "./component/UseApply.vue"
import EchartsComponent from "@/components/ECharts/index.vue";
const cardList1 = ref([
  {
    title: '本月应缴金额',
    count: 2847,
    icon: new URL('@/assets/static/出院人次数.png', import.meta.url).href,
  },
  {
    title: '待缴人数',
    count: 2847,
    icon: new URL('@/assets/static/出院人次数.png', import.meta.url).href,
  },
  {
    title: '已缴金额',
    count: 2847,
    icon: new URL('@/assets/static/出院人次数.png', import.meta.url).href,
  },
  {
    title: '缴费完成率',
    count: 2847,
    icon: new URL('@/assets/static/出院人次数.png', import.meta.url).href,
  }
]);
const record = ref('');
const filter = ref('all'); // 筛选条件
const feeRules = ref([
  {
    level: '普通党员',
    salaryRange: '3000元以下',
    rate: '0.5%',
    example: '¥15.00'
  },
  {
    level: '初级职称',
    salaryRange: '3000-5000元',
    rate: '1%',
    example: '¥40.00'
  },
  {
    level: '中级职称',
    salaryRange: '5000-8000元',
    rate: '1.5%',
    example: '¥97.50'
  },
  {
    level: '高级职称',
    salaryRange: '8000元以上',
    rate: '2%',
    example: '¥160.00'
  },
  {
    level: '普通党员',
    salaryRange: '3000元以下',
    rate: '0.5%',
    example: '¥15.00'
  },
  {
    level: '初级职称',
    salaryRange: '3000-5000元',
    rate: '1%',
    example: '¥40.00'
  },
  {
    level: '中级职称',
    salaryRange: '5000-8000元',
    rate: '1.5%',
    example: '¥97.50'
  },
  {
    level: '高级职称',
    salaryRange: '8000元以上',
    rate: '2%',
    example: '¥160.00'
  }
]);
const chartOption0 = ref( {
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' }
  },
  legend: {
    data: ['应缴金额', '实缴金额'],
    left: 'center'
  },
  // 只有数据量超过阈值时才添加dataZoom配置, todo...阈值是6, 4为X轴的数据量,可以根据实际接口数据量来选择是否添加dataZoom
  // ...(4 >= 6 && {
  //   dataZoom: [
  //     {
  //       type: 'slider',
  //       show: true,
  //       xAxisIndex: 0,
  //       start: 0,
  //       end: Math.min(100, (4 / 8) * 100),
  //       bottom: 10
  //     },
  //     {
  //       type: 'inside',
  //       xAxisIndex: 0,
  //       start: 0,
  //       end: Math.min(100, (4 / 8) * 100)
  //     }
  //   ]
  // }),
  xAxis: {
    type: 'category',
    data: ['内科支部', '外科支部', '妇产科支部', '儿科支部', '医技支部', '行政支部']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '应缴金额',
      type: 'bar',
      data: [1200, 1500, 900, 700, 900, 600],
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: '#d9534f'
      }
    },
    {
      name: '实缴金额',
      type: 'bar',
      data: [1100, 1400, 900, 650, 800, 600],
      label: {
        show: true,
        position: 'top'
      },
      itemStyle: {
        color: '#5cb85c'
      }
    }
  ]
});
</script>
<style lang='scss' scoped>
.life-container {
  height: calc(100% - 40px);
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 20px;
  border-radius: 5px;
  .el-card {
    border-radius: 13px;
    border: none;
  }
  :deep(.el-card__body){
    width: 100%;
  }
  .title {
    font-size: 16px;
    color: #858E98;
  }
  .icon {
    height: 20px;
  }
  .count {
    color: #464646;
    font-size: 30px;
    font-weight: 600;
    padding: 14px 0;
  }
  .pay-container{
    margin-top: 20px;
     .pay{
       background-color: #FFFFFF;
       margin-right: 10px;
       padding: 20px;
       border-radius: 10px;
       width: 500px;
       .title{
          font-size: 18px;
          color: #333333;
          font-weight: bolder;
       }
       .date{
         font-size: 16px;
         color: #858E98;
       }
     }
     .payment-record{
       background-color: #FFFFFF;
       margin-left: 10px;
       padding: 20px;
       border-radius: 10px;
       .title{
         font-size: 18px;
         color: #333333;
         font-weight: bolder;
       }
     }
  }
  .standard-container{
    margin-top: 20px;
    .standard{
       padding: 20px 20px 40px 20px;
       border-radius: 10px;
      .title{
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
      }
      .date{
        font-size: 16px;
        color: #858E98;
      }
    }
    .situation{
      padding: 20px;
      border-radius: 10px;
      .title{
        font-size: 18px;
        color: #333333;
        font-weight: bolder;
      }
    }
  }
  .charts-common {
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    height: 300px;
  }
}


</style>
